<template>
  <view class="report-container">
    <!-- 报告基本信息 -->
    <view class="info-card">
      <view class="exam-info">
        <text class="name">{{ report.name }}</text>
        <text class="time">检查时间：{{ report.examTime }}</text>
        <text class="time">报告时间：{{ report.reportTime }}</text>
      </view>
      <view class="doctor-info">
        <text class="label">检查医生</text>
        <text class="value">{{ report.examDoctor }}</text>
      </view>
      <view class="doctor-info">
        <text class="label">审核医生</text>
        <text class="value">{{ report.reviewDoctor }}</text>
      </view>
    </view>
    
    <!-- 报告内容 -->
    <view class="report-content card">
      <view class="section">
        <text class="section-title">检查所见</text>
        <text class="content">{{ report.findings }}</text>
      </view>
      
      <view class="section">
        <text class="section-title">诊断意见</text>
        <text class="content">{{ report.diagnosis }}</text>
      </view>
      
      <!-- 检查图片 -->
      <view class="images-section" v-if="report.images?.length">
        <text class="section-title">检查图片</text>
        <view class="image-list">
          <image 
            v-for="(img, index) in report.images" 
            :key="index"
            :src="img"
            mode="aspectFill"
            @tap="previewImage(index)"
          />
        </view>
      </view>
      
      <!-- 参考值 -->
      <view class="reference-section" v-if="report.references?.length">
        <text class="section-title">参考指标</text>
        <view class="reference-list">
          <view 
            class="reference-item"
            v-for="(item, index) in report.references"
            :key="index"
          >
            <view class="item-header">
              <text class="name">{{ item.name }}</text>
              <text class="value" :class="item.status">{{ item.value }}</text>
            </view>
            <view class="reference">
              <text class="label">参考范围：</text>
              <text class="range">{{ item.range }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="action-btn" @tap="downloadReport">
        <text class="iconfont icon-download"></text>
        下载报告
      </button>
      <button class="action-btn primary" @tap="shareReport">
        <text class="iconfont icon-share"></text>
        分享报告
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 报告数据
const report = ref({
  name: '心电图检查',
  examTime: '2024-03-25 10:00',
  reportTime: '2024-03-25 11:30',
  examDoctor: '王医生',
  reviewDoctor: '李主任',
  findings: '窦性心律，心率75次/分，电轴正常，各导联ST-T改变不明显...',
  diagnosis: '心电图大致正常',
  images: [
    '/static/report/ecg1.jpg',
    '/static/report/ecg2.jpg'
  ],
  references: [
    {
      name: '心率',
      value: '75',
      range: '60-100次/分',
      status: 'normal'
    },
    {
      name: 'PR间期',
      value: '160',
      range: '120-200ms',
      status: 'normal'
    },
    {
      name: 'QT间期',
      value: '420',
      range: '350-440ms',
      status: 'normal'
    }
  ]
})

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    urls: report.value.images,
    current: index
  })
}

// 下载报告
const downloadReport = () => {
  uni.showLoading({
    title: '下载中...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '下载成功',
      icon: 'success'
    })
  }, 2000)
}

// 分享报告
const shareReport = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 1,
    summary: '分享我的检查报告',
    success: function (res) {
      console.log('分享成功:', res)
    },
    fail: function (err) {
      console.log('分享失败:', err)
    }
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const reportId = page.$page?.options?.id
  
  // 加载报告数据
  loadReportDetail(reportId)
})

const loadReportDetail = (id) => {
  // 加载报告数据的逻辑
}
</script>

<style lang="scss">
.report-container {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .info-card {
    background: $primary-gradient;
    padding: 40rpx 30rpx;
    color: #fff;
    
    .exam-info {
      margin-bottom: 30rpx;
      
      .name {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .time {
        font-size: 26rpx;
        opacity: 0.9;
        display: block;
        margin-bottom: 8rpx;
      }
    }
    
    .doctor-info {
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        font-size: 26rpx;
        opacity: 0.9;
        width: 140rpx;
      }
      
      .value {
        font-size: 26rpx;
      }
    }
  }
  
  .report-content {
    margin: 20rpx;
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    box-shadow: $shadow-sm;
    
    .section {
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .section-title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .content {
        font-size: 28rpx;
        color: $text-regular;
        line-height: 1.8;
      }
    }
    
    .images-section {
      .image-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;
        
        image {
          width: 100%;
          height: 300rpx;
          border-radius: $radius-md;
        }
      }
    }
    
    .reference-list {
      .reference-item {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8rpx;
          
          .name {
            font-size: 28rpx;
            color: $text-primary;
            font-weight: bold;
          }
          
          .value {
            font-size: 28rpx;
            font-weight: bold;
            
            &.normal {
              color: $success;
            }
            
            &.high {
              color: $danger;
            }
            
            &.low {
              color: $warning;
            }
          }
        }
        
        .reference {
          font-size: 24rpx;
          color: $text-secondary;
          
          .label {
            margin-right: 8rpx;
          }
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: $text-regular;
      background: $bg-color;
      border-radius: $radius-xl;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        margin-right: 8rpx;
      }
      
      &.primary {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 